<template>
    <view>
        <view v-if="is_login == false" style="margin: 10px 20px">
            <button class="wx-bg-color" style="color: white" @click="wxLogin">微信小程序快速登入</button>
        </view>
        <view v-if="is_login == true" style="margin: 10px 20px">
            <button type="warn" @click="logout">退出</button>
        </view>
        <view style="height: 50px"></view>
        <mymenu :activeMenu="'person'"></mymenu>
    </view>
</template>

<script>
import mymenu from '@/widget/components/Menu'

import { checkLogin, logout } from '@/auth/api/auth'
import { login as miniappLogin } from '@/auth/api/miniappAuth'

export default {
    components: { mymenu },
    data() {
        return {
            theme: {},
            is_login: false
        }
    },
    created() {
        if(checkLogin()) {
            this.is_login = true
        }
    },
    methods: {
        wxLogin() {
            miniappLogin().then(res => {
                this.is_login = true
                uni.showToast({
                    title: '登入成功',
                    icon: 'none'
                })
            }).catch(err => {
                console.log(err)
                uni.showToast({
                    title: '登入失败：' + err.errorMsg,
                    icon: 'none'
                })
            })
        },
        logout() {
            logout().then(res => {
                this.is_login = false
                uni.showToast({
                    title: '退出成功',
                    icon: 'none'
                })
            }).catch(e => {
                uni.showToast({
                    title: '退出失败',
                    icon: 'none'
                })
            })
        }
    }
}
</script>

<style lang="scss">
@import url("~@/common/iconfont/iconfont.css");

.panel {
    margin: 25rpx 15rpx 15rpx 15rpx;
    padding: 15rpx;
    background-color: white;
    border-radius: 15rpx;

    .title {
        padding-bottom: 5px;
        border-bottom: 1px #f3f3f3 solid;
    }

    .item {
        text-align: center;
        font-size: 12px;

        .icon {
            height: 40px;
            line-height: 40px;
        }
    }
}

.contact-btn::after {
    border: none;
}

.list {
    background-color: white;
    margin: 15rpx;
    border-radius: 15rpx;

    .list-item {
        padding: 13px 0px;
        border-bottom: 1px #f3f3f3 solid;
        display: flex;
    }
    .list-header {
        width: 50rpx;
        height: 22px;
        line-height: 22px;
        text-align: center;
    }
    .list-content {
        width: 620rpx;
    }
    .list-footer {
        width: 50rpx;
        height: 22px;
        line-height: 22px;
        text-align: center;
    }
}
</style>